<template>
  <div class="bonuspools page" ref="webview">
    <div ref="wrapper">
      <div class="hd-bar">
        <van-sticky>
          <van-nav-bar title="奖金池" left-arrow @click-left="$router.go(-1)" />
        </van-sticky>
        <div class="bonuspools-info">
          <div class="title">销售提成
            <span class="text">释放速度：{{ royaltyInfo.everyDayBonus }}/每天</span>
          </div>
          <div class="progress-box">
            <div class="progress" :style="{ width: ((royaltyInfo.bonusTotal * 100 / royaltyInfo.capacityPool) || 0) + '%' }"></div>
          </div>
          <div class="info">
            <span class="cumulative">累计释放奖金：{{ royaltyInfo.bonusTotal }}</span>
            <span class="total">奖金容量池：{{ royaltyInfo.capacityPool }}</span>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="title van-hairline--bottom">分享加速</div>
        <div class="content">
          <p>当前有效推荐人数：{{ royaltyInfo.recCount }}人</p>
          <p class="c">当前分享加速为{{ royaltyInfo.shareBonusRatio }}% x {{royaltyInfo.recCount}}²</p>
        </div>
      </div>
      <div class="section">
        <div class="title van-hairline--bottom">辅导加速</div>
        <div class="content">
          <p>当前有效推荐人数：{{royaltyInfo.recCount}}人</p>
          <p class="c">拿一代奖金的{{ royaltyInfo.firstRatio }}% 拿二代奖金的{{ royaltyInfo.secondRatio }}%</p>
        </div>
      </div>
      <div class="section">
        <div class="title van-hairline--bottom">管理加速</div>
        <div class="content">
          <p>当前级别为{{royaltyInfo.manageLevel}}</p>
          <p class="c">奖金加速为{{ royaltyInfo.manageBonus }}% x n²</p>
        </div>
      </div>
      <div class="section">
        <div class="title van-hairline--bottom">平级加速</div>
        <div class="content">
          <p>当前级别为{{royaltyInfo.manageLevel}}</p>
          <p class="c">离业绩最近的初级或高级部门，拿对方管理奖的{{royaltyInfo.levelBonusRatio}}%</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'bonuspools',
  data () {
    return {
      isNavBg: false,
      royaltyInfo: {}
    };
  },
  methods: {
    ScrollNavBar (scrollTop) {
      this.isNavBg = scrollTop.isFixed;
    },
    royalty () {
      this.$API.user.royalty().then(res => {
        if (!res.code) {
          this.royaltyInfo = res.data;
        }
      });
    }
  },
  created () {
    this.royalty();
  }
};
</script>
<style scoped lang="less">
.bonuspools {
  .hd-bar {
    padding-bottom: 20px;
    background: linear-gradient(90deg, #917eff 0%, #917eff 100%);
    .van-nav-bar.van-hairline--bottom::after {
      display: none;
    }
  }
  .bonuspools-info {
    padding: 12px 30px;
    color: #fff;
    .title {
      font-size: 34px;
      padding: 10px 0 34px;
      .text {
        color: #dfd9ff;
        padding-left: 10px;
        font-size: 24px;
      }
    }
    .progress-box {
      height: 30px;
      background-color: #7b69e5;
      border-radius: 30px;
      .progress {
        height: 30px;
        border-radius: 30px;
        background: linear-gradient(0deg, #ffbc3b 0%, #fef5b5 100%);
        box-shadow: 0px 5px 8px 0px rgba(145, 126, 255, 0.3);
        border-radius: 15px;
      }
    }
    .info {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }
  }
  .section {
    padding: 30px;
    margin: 20px;
    background-color: #fff;
    border-radius: 15px;
    .title {
      font-size: 24px;
      padding-bottom: 30px;
    }
    .content {
      color: #353535;
      padding-top: 20px;
      p {
        padding: 10px 0;
        font-size: 28px;
      }
      .c {
        color: #917eff;
      }
    }
  }
}
</style>
